<script setup name="Book">
import { reactive } from "vue"

let author = reactive({
    username: "曹雪芹",
    age: 200
})

let books = reactive([
    { name: '金瓶梅', author: '兰陵笑笑生' },
    { name: '红楼梦', author: '曹雪芹' }
]

)

const onUpdateAuthor = () => {
    console.log(author.username)
    // author.username = '张三'
    // author.age=800
    Object.assign(author, { 'username': 'zhangsan', age: 100 })
}

const onModifyBook = () =>{
    Object.assign(books,[
    { name: '西游记', author: '吴承恩' },
    { name: '水浒传', author: '施耐庵' }
    ])
}

</script>

<template>
    <div>
        <h1>作者名：{{ author.username }}, 年龄：{{ author.age }}</h1>
        <button @click='onUpdateAuthor'>更新作者信息</button>
    </div>
    <div></div>
    <div>
        <h1>作者名：{{books[0].author}},书名：{{books[0].name}}</h1>
        <h1>作者名：{{books[1].author}},书名：{{books[1].name}}</h1>
        <button @click="onModifyBook">更新图书信息</button>
    </div>

</template>

<style scoped></style>